<template>
  <div id="test_app">
    <!--echarts的容器-->
    <div id="chartLineBox" style="width: 830px; height: 420px"></div>
  </div>
</template>
   
  <script>
import * as echarts from "echarts";
export default {
     data() {
    return {
      list: [],
      data1: [],
      data2: [],
    };
  },
  /* async getList() {
    const responseData = await screen_count_lineChart({
        startTime: "2020-07-20",
        endTime: "2020-07-27"
    });
    // 任务总量
    responseData.data.allTask.forEach(item => {
        this.allTask.date.push(item.date);
        this.allTask.workNum.push(item.tasknum);
    });
    // 订单总数
    responseData.data.mapOrder.forEach(item => {
        this.mapOrder.date.push(item.date);
        this.mapOrder.workNum.push(item.tasknum);
    });
    // 成功率
    responseData.data.successTask.forEach(item => {
        this.successTask.date.push(item.date);
        this.successTask.workNum.push(item.tasknum);
    })
    }, */
    mounted () {
        // 不必在自己引入axios变量, 而是直接使用全局属性$axios
       this.$axios({
      url: "api/inhabitant/findInhabitantByWeek",
      mounted: "GET",
    }).then((res) => {
      console.log(res);
      this.list = res.data.data;
      this.init()
    });
    //  // 不必在自己引入axios变量, 而是直接使用全局属性$axios
    this.$axios({
      url: "api/conclude/findConcludeByDateWeed",
      mounted: "GET",
    }).then((res) => {
      console.log(res);
      this.data1 = res.data.data;
      this.init()
    });
     // 不必在自己引入axios变量, 而是直接使用全局属性$axios
    this.$axios({
      url: "api/record/findDateByWeek",
      mounted: "GET",
    }).then((res) => {
      console.log(res);
      this.data2 = res.data.data;
      this.init()
    });  
    },
  methods: {
       init(){
 this.chartLine = echarts.init(document.getElementById("chartLineBox"));

    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        //设置tip提示
        trigger: "axis",
      },

      legend: {
        //设置区分（哪条线属于什么）
        icon: "circle",
        left: "6%",
        data: ["居民数量", "服务量", "签约数量"],
      },
      color: ["#2984f8", "#FA6F53", "#8AE09F"], //设置区分（每条线是什么颜色，和 legend 一一对应）
      xAxis: {
        //设置x轴
        type: "category",
        boundaryGap: false, //坐标轴两边不留白
        data: ["1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
        name: "", //X轴 name
        nameTextStyle: {
          //坐标轴名称的文字样式
          color: "#999999",
          fontSize: 16,
          padding: [0, 0, 0, 20],
        },
        axisLine: {
          //坐标轴轴线相关设置。
          lineStyle: {
            color: "#999999",
          },
        },
      },
      yAxis: {
        name: "",
        nameTextStyle: {
          color: "#FA6F53",
          fontSize: 16,
          padding: [0, 0, 10, 0],
        },
        axisLine: {
          lineStyle: {
            color: "#999999",
          },
        },
        type: "value",
      },
      series: [
        {
          name: "居民数量",
          data: this.list,
          type: "line", // 类型为折线图
          lineStyle: {
            // 线条样式 => 必须使用normal属性
            normal: {
              color: "#2984f8",
            },
          },
        },
        {
          name: "服务量",
          data: this.data1,
          type: "line",
          lineStyle: {
            normal: {
              color: "#FA6F53",
            },
          },
        },
        {
          name: "签约数量",
          data: this.data2,
          type: "line", // 类型为折线图
          lineStyle: {
            // 线条样式 => 必须使用normal属性
            normal: {
              color: "#8AE09F",
            },
          },
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    this.chartLine.setOption(option);
      }
  } 
    
   


  
};
</script>
   
  <style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>

  